<template>
    <view class="item" :style="{ background: props.background, padding: props.padding }">
        <view class="center">
            <slot name="center"></slot>
        </view>

        <view class="cont" :style="props.column ? 'flex-direction:column;' : 'align-items:' + props.align + ';'">
            <view class="left"
                :style="{ width: props.column ? '100%' : props.width, paddingRight: props.column ? '0' : '20rpx' }">
                <slot name="left">
                    <view class="required" v-if="required">*</view>
                    <view class="title">{{ props.title }}</view>
                </slot>
            </view>
            <view
                :style="{ marginTop: props.column ? '15rpx' : '0', width: props.column ? 'auth' : 'calc(100% - ' + props.width + ')', textAlign: props.column ? 'left' : 'right' }">
                <slot>{{ props.value }}</slot>
                <wd-icon v-if="props.rightIcon" :name="props.rightIcon" size="28rpx" color="#999" />
            </view>
        </view>
        <slot name="tips">
            <view class="tips" v-if="tips">{{ tips }}</view>
        </slot>
    </view>
</template>
<script lang="ts" setup>
const props = defineProps({
    title: { type: String, default: '' },
    required: { type: Boolean, default: false },
    width: { type: String, default: '270rpx' },
    tips: { type: String, default: '' },
    value: { type: String, default: '' },
    rightIcon: { type: String, default: '' },
    column: { type: Boolean, default: false },
    align: { type: String, default: 'center' },
    background: { type: String, default: 'white' },
    padding: { type: String, default: '20rpx' },
})
</script>
<style scoped>
* {
    box-sizing: border-box;
}

.item {
    margin-bottom: 20rpx;
    border-radius: 12rpx;
}

.cont {
    display: flex;
    justify-content: space-between;
}

.required {
    margin-right: 6rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: red;
}

.tips {
    padding-top: 20rpx;
    font-size: 24rpx;
    color: #666;
}

.left {
    display: flex;
    align-items: baseline;
}

.title {
    font-size: 28rpx;
    font-weight: bold;
}

.center {
    text-align: center;
}
</style>